<script setup>
  import {useRouter} from 'vue-router'
  import CartCard from '@/components/cart/CartCard.vue'
  import useCartStore from '@/stores/cart.js';
  const cartStore = useCartStore()

  const router = useRouter()

  const orderConfirm = (name)=>{
    router.push({
      path:'/orderConfirm',
      query:{
        shopName:name
      }
    })
  }
</script>

<template>
  <div class="cart_list">
      <div class="cart_list_header">我的全部购物车
        <span>({{ cartStore.cartList.length }})</span>
      </div>
      <div class="cart_list_content">
          <div class="cart_list_content_item" v-for="item in cartStore.cartList" :key="item.name" @click="orderConfirm(item.name)">
              <CartCard :shopCartInfo="item"/>
          </div>
      </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.cart_list {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: .5rem;
  background-color: $dark-bgColor;
  overflow-y: scroll;

  &_header {
      padding: .08rem .18rem;
      font-size: .16rem;
      color: $content-fontcolor;
      text-align: center;
      line-height: .24rem;
      background-color: $bgColor;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
  }

  &_content {
      margin-top: .58rem;
  }
}
</style>